<template>
  <div class="wxlogin">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <span>绑定手机号</span>
            <i class="iconfont iconzuojiantou" style="color: white;"></i>  
        </div>
        <div class="content">
            <div class="fileInput">
                <h3>手机号</h3>
                <div class="ipt">
                    <input type="text" placeholder="请输入手机号" oninput="value=value.replace(/[^\d]/g,'')" v-model="phone">
                    <div @click="sendCode" class="aspan">
                        <span class="Sone">
                            <span>{{code}}</span>
                            <span v-show="timeShow">{{content}}</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="fileInput">
                <h3>验证码</h3>
                <div class="ipt">
                    <input type="text" placeholder="请输入短信验证码" v-model="phoneCode" >
                    <!-- <span @click="sendCode" class="aspan">
                        <span v-show="timeShow">{{content}}</span>
                        <span>{{code}}</span>
                   </span> -->
                </div>
            </div>
            <div class="fileInput">
                <h3>密码</h3>
                <div class="ipt">
                    <input :type="type" placeholder="请输入密码" v-model="password">
                    <i class="iconfont iconyanjing" v-if="show" @click="changType('open')"></i>
                    <i class="iconfont iconbiyan"  v-else @click="changType('close')"></i>
                </div>
            </div>
            
        </div>
        <!-- <p class="noAccount">
            <span>已有账号?</span><span @click="goLogin">去登录</span>
        </p> -->
        <div class="confirm" @click="confirmRegiest">
            确定
        </div>
        <!-- <div class="radio">
            <van-checkbox v-model="checked" checked-color="#38A83F"></van-checkbox>
            <span>我已阅读并同意<span class="serve" @click="agreement">服务协议</span>和<span  class="serve" @click="policy">隐私政策</span></span>
        </div> -->
    </div>
</template>

<script>
import { Toast } from 'vant';
  export default {
    name:'wxlogin',
    data(){
        return {
            show:false,
            checked: true,
            type:'password',
            phone:'',
            password:'',
            phoneCode:'',
            phoneCodeS:'',
            code:'获取验证码',
            timea:null,
            tiames:"",
            time: null,
            timeShow: false,
            content: "60秒",  // 按钮里显示的内容
            totalTime: 60      //记录具体倒计时时间
        }
    },
    mounted() {
        // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods:{
        onClickLeft (){
            this.$router.push("/login");
        },
        goLogin (){
            this.$router.push('/login');
        },
        changType(val){
            this.show=!this.show
            if(val=='open'){
                this.type='password'
            }else{
                this.type='text'
            }
        },
       //发送手机验证码
        sendCode (){
            if(this.code!='获取验证码') return false;
            if(this.phone==''){
                Toast('请输入手机号')
                return false;
            }
            if(this.tiames == ""){
                this.note();
            }
        },
       //短信
       note(){
          this.$axios.post("/system/user/verificationCode",{
               phoneNumber:this.phone,
             }).then(res =>{
                console.log("yanz",res)
                this.tiames = 60;
                if(res.data.code==0){
                  this.timeShow = true;
                  this.code="请等待"
                  clearInterval(set)
                  let set = setInterval(() => {
                     this.totalTime --
                     this.content = this.totalTime +"秒";
                     if(this.totalTime <= 0){
                        clearInterval(set);
                        this.timeShow = false;
                        this.tiames = "";
                        this.totalTime = 60;
                        this.content = "60秒"
                        this.code="获取验证码"
                     }
                  }, 1000);
                }
          
             })
       },
       //确定注册
       confirmRegiest (){
          console.log(this.phone.length)
           var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
           if(this.phone == '' ){
              Toast('请输入手机号')
              return false
           } 
           else if(this.phone.length != 11 || !myreg.test(this.phone)){
              Toast("请输入正确手机号")
              return false
           }
           else if(this.password==''){
              Toast("请输入密码")
              return false
           }
            else if(this.password.length < 6){
              Toast("密码不能小于6位")
              return false
           }
            else if(this.phoneCode.length != 6){
              Toast("验证码错误")
              return false
           }
           else if(this.phoneCode==''){
              Toast("请输入手机验证码")
              return false
           }else{
              let list = JSON.parse(localStorage.getItem("wxprame")).openid;
              this.$axios.post('/system/user/villagerAddSave',{
                  loginName:this.phone,
                  password:this.password,
                  verificationCode:this.phoneCode,
                  openId:list
              }).then(res =>{
                  console.log(res)
                   if(res.data.code==0){
                     //  Toast(res.data.msg)
                      this.goIndex()
                     //  this.$router.push({path:'/login',query:{phone:this.phone,password:this.password}});
                     //  this.$router.push('/index')
                   }else{
                       Toast(res.data.msg)
                   }
              })
           }
       },
      //  登陆
        goIndex() {
            let list = JSON.parse(localStorage.getItem("wxprame")).openid;
            this.$axios.post("/login", {
                openId:list
            }).then(res => {
                console.log(res)
                if(res.data.code == 0){
                    this.$store.commit('changeToken',res.data.data.token);
                    localStorage.setItem('key',JSON.stringify(res.data.data));
                    this.$router.push("/index");
                    return false;
                }
                 
            });
            
        },
        agreement(){
            this.$router.push({path:"/TermsOfService",query:{type:"40",value:"服务协议"}})
        },
        policy(){
            this.$router.push({path:"/TermsOfService",query:{type:"30",value:"隐私政策"}})
        },
        goBack(){
            mui.init({
                keyEventBind: {
                backbutton: true, //关闭back按键监听
                }
            })
            //首页返回键处理
            // 处理逻辑： 1s内，连续两次按返回键，则退出应用；
            var first = null;
            mui.back = function(){
                // 首次按键， 提示 再按一次退出应用
                if(!first){
                first = new Date().getTime();//记录第一次按下回退键的时间
                mui.toast("再按一次退出应用");
                //   history.go(-1); // 回退到上一页
                setTimeout(function(){
                    //1s 后清除
                    first = null;
                }, 1000);

                }else{
                if(new Date().getTime() - first < 1000){
                    //如果两次按下的时间小于1s
                    plus.runtime.quit(); //那么就退出app
                }
                }
            }
                
        },
    }
  }
</script>

<style lang="less" scoped>
.wxlogin{
    width: 100%;
    height: 100%;
    font-size: 0;
    position: relative;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#333;
        height: 1.25rem;
        line-height: 1.25rem;
        background-color: #fff;
        margin-bottom: 0.44rem;
        display: flex;
        justify-content: space-between;
        font-family: "PingFang-SC-Medium";
        padding: 0 0.2rem;
        box-sizing: border-box;
    }
    .content{
       padding:0.35rem;
       box-sizing: border-box;
       margin-top:1.7rem;
       .fileInput{
            border-bottom: 1px solid #C4C2C2;
            margin-bottom: 0.4rem;
            h3{
                font-size: 0.38rem;
                color:#333;
                font-family: "PingFang-SC-Medium";
            }
            .ipt{
                padding:0.3rem 0;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 0.26rem;
                input{
                    font-size: 0.34rem;
                    color:#999;
                    background-color: transparent;
                    border-left:2px solid #1DBE61;
                    text-indent: 0.1rem;
                    width: 72%;
                    height: 100%;
                    &::placeholder{
                        font-size: 0.28rem;
                        color:#999;
                    }
                }
                i{
                    margin-right: 0.3rem;
                }
                .aspan{
                    width: 1.9rem;
                    height: 0.6rem;
                    border-radius: 0.3rem;
                    border: 0.01rem solid #999999;
                    line-height: 0.6rem;
                    // padding-left: 0.1rem;
                    display: flex;
                    color:#999999;
                    .Sone{
                        // width: 0.65rem;
                        height: 0.6rem;
                        margin: 0 auto;
                    }
                }
            }   
        }
    }
    // .noAccount{
    //     font-size: 0.28rem;
    //     color:#666;
    //     padding-left:0.3rem;
    //     box-sizing: border-box;
    //     span:nth-child(2){
    //        color:#38A83F;
    //     }
    // }
    .confirm{
        width:4.8rem;
        height:.8rem;
        background:rgba(56,168,63,1);
        border-radius:.3rem;
        color:#fff;
        font-size: 0.36rem;
        line-height: 0.8rem;
        margin:0 auto;
        text-align: center;
        margin-top:1.5rem;
        border-radius: 0.2rem;
    }
    // .radio{
    //     font-size: 0.26rem;
    //     color:#666;
    //     display: flex;
    //     justify-content: center;
    //     margin-top:0.55rem;
    //     vertical-align: center;
    //     .van-checkbox{
    //         transform: scale(0.7);
    //     }
    //     .serve{
    //        color:#38A83F;
    //     }
    //     span{
    //         margin-top:0.02rem;
    //     }
    // }
  }
</style>
